<template>
	<view>
		<!--  资金信息模板  -->
		<u-modal :show="modal.byCapitalInfo.show" :title="modal.byCapitalInfo.title" :closeOnClickOverlay=true
			:showConfirmButton=false @close="modal.byCapitalInfo.close()">
			<view>
				<u--form labelPosition="left" labelWidth="auto">
					<u-form-item label="收益占比(股份) : ">
						<text style="color: #1e90ff">{{ modal.byCapitalInfo.data.shares * 100 + " % " }}</text>
					</u-form-item>

					<u-form-item label="总余额 : ">
						<text style="color: #ffa502">{{ modal.byCapitalInfo.data.totalBalance }}&nbsp;元</text>
					</u-form-item>

					<u-form-item label="正在提现的金额 : ">
						<text style="color: #ff4757">{{ modal.byCapitalInfo.data.applyIng }}&nbsp;元</text>
					</u-form-item>

					<u-form-item label="提现成功金额 : ">
						<text style="color: #2ed573">{{ modal.byCapitalInfo.data.successApply }}&nbsp;元</text>
					</u-form-item>

					<view style="display: flex;">
						<u-form-item label="不可提现金额: ">
							<text style="color: #87847f">{{ modal.byCapitalInfo.data.noWith }}&nbsp;元</text>
						</u-form-item>
						<u-icon name="question-circle-fill" size="17" @click="modalShow=true"></u-icon>
					</view>
				</u--form>
			</view>
		</u-modal>

		<!-- 不可提现 -->
		<u-modal :show="modalShow" content="不可提现金额包括了土地租赁押金等其他金额" @confirm="modalShow=false" />

		<!-- 提交搜索弹窗 -->
		<u-popup :show="condition.show" :round="10" mode="bottom" :direction=0 :closeable=true
			@close="condition.close()">
			<view>
				<view style="text-align: center;margin: 10px 0 20px 0 ">
					<text style="font-size: 34rpx;font-weight: bold">
						填充筛选条件(不填的条件不参与判断)
					</text>
				</view>
				<view style="margin: 10px 10px">
					<u--form labelPosition="left" labelWidth="auto">

						<u-form-item label="银行卡号(包含) : " borderBottom>
							<u--textarea v-model="condition.data.cardNum" :clearable=true :autoHeight=true :maxlength=19
								type="number" :count=true>
							</u--textarea>
						</u-form-item>

						<u-form-item label="备注(包含):" borderBottom>
							<u--textarea v-model="condition.data.remark" :clearable=true :autoHeight=true :maxlength=20
								:count=true>
							</u--textarea>
						</u-form-item>K

						<u-form-item label="审核状态:" borderBottom>
							<u-tag :text=options.status.text plain type="success" @click="options.status.open()">
							</u-tag>
						</u-form-item>

						<u-form-item label="申请时间范围:" borderBottom>
							<view :style="{'z-index': condition.data.createTime.zIndex}">
								<uni-datetime-picker hide-second="true" type="datetimerange"
									v-model="condition.data.createTime.value" @change="condition.data.createTime.change"
									rangeSeparator="至" />
							</view>
						</u-form-item>

						<u-form-item label="审核时间范围:" borderBottom>
							<view :style="{'z-index': condition.data.auditTime.zIndex}">
								<uni-datetime-picker hide-second="true" type="datetimerange"
									v-model="condition.data.auditTime.value" @change="condition.data.auditTime.change"
									rangeSeparator="至" />
							</view>
						</u-form-item>

						<view>
							<u-row gutter="1">
								<u-col :span="6">
									<u-button type="success" text="清空" @click="condition.def()"></u-button>
								</u-col>
								<u-col :span="6">
									<u-button type="primary" text="搜索" @click="condition.search()"></u-button>
								</u-col>
							</u-row>
						</view>
					</u--form>
				</view>
			</view>
		</u-popup>

		<!--  条件状态选择  -->
		<u-picker :show="options.status.show" :columns="options.status.ops" @confirm="options.status.confirm"
			@close="options.status.close" @cancel="options.status.close" closeOnClickOverlay="true" title="选择审核状态"
			keyName="text">
		</u-picker>

		<!-- 排序条件选择器 -->
		<u-picker :show="listSortPicker.show" :columns="listSortPicker.options" @confirm="listSortPicker.confirm"
			@close="listSortPicker.close" @cancel="listSortPicker.close" title="选择某属性点击确定即可" :closeOnClickOverlay=true
			keyName="label">
		</u-picker>
		<!--  提现记录详情  -->
		<u-modal :show="modal.byDetails.show" :title="modal.byDetails.title" :closeOnClickOverlay=true
			:showConfirmButton=false @close="modal.byDetails.close()">
			<view>
				<u--form labelPosition="left" labelWidth="auto">

					<u-form-item label="记录ID : " @click="service.copyText(modal.byDetails.data.id,'记录ID')"
						v-if="!service.check.isNull(modal.byDetails.data.id)">
						<text>{{ modal.byDetails.data.id }}</text>
					</u-form-item>

					<u-form-item label="审核ID : " @click="service.copyText(modal.byDetails.data.auditId,'审核ID')"
						v-if="!service.check.isNull(modal.byDetails.data.auditId)">
						<text>{{ modal.byDetails.data.auditId }}</text>
					</u-form-item>

					<u-form-item label="提现金额 : " v-if="!service.check.isNull(modal.byDetails.data.money)">
						<text style="color: #ffa502">{{ modal.byDetails.data.money }}&nbsp;元</text>
					</u-form-item>

					<u-form-item label="银行卡ID : " @click="service.copyText(modal.byDetails.data.bankCardId,'银行卡ID')"
						v-if="!service.check.isNull(modal.byDetails.data.bankCardId)">
						<text>{{ modal.byDetails.data.bankCardId }}</text>
					</u-form-item>

					<u-form-item label="银行卡号 : " @click="service.copyText(modal.byDetails.data.cardNum,'银行卡号')"
						v-if="!service.check.isNull(modal.byDetails.data.cardNum)">
						<text style="color: #70a1ff">{{ modal.byDetails.data.cardNum }}</text>
					</u-form-item>

					<u-form-item label="持卡人姓名 : " @click="service.copyText(modal.byDetails.data.cardName,'持卡人姓名')"
						v-if="!service.check.isNull(modal.byDetails.data.cardName)">
						<text>{{ modal.byDetails.data.cardName }}</text>
					</u-form-item>

					<u-form-item label="开户行 : " @click="service.copyText(modal.byDetails.data.bankName,'开户行')"
						v-if="!service.check.isNull(modal.byDetails.data.bankName)">
						<text>{{ modal.byDetails.data.bankName }}</text>
					</u-form-item>

					<u-form-item label="审核状态 : " v-if="!service.check.isNull(modal.byDetails.data.status)">
						<rich-text :nodes="style.status(modal.byDetails.data.status)"> </rich-text>
					</u-form-item>
					<u-form-item label="审核时间 : " v-if="!service.check.isNull(modal.byDetails.data.auditTime)">
						<text>{{service.style.time(modal.byDetails.data.auditTime,6)}}</text>
					</u-form-item>
				</u--form>
				<view style="margin-top: 5px">
					<u--text type="success" text="可以点击字段复制内容哦~" />
				</view>
			</view>
		</u-modal>
		<!-- 按钮 -->
		<view style="margin: 20rpx 0 0 20rpx">
			<view style="display: inline-block;margin-right: 10rpx">
				<u-button shape="circle" size="medium" @click="condition.open()">
					<text style="font-size: 24rpx;
            font-weight: bold;
            color: #8c7d7d;padding: 0 20rpx">
						条件搜索
					</text>
				</u-button>
			</view>

			<view style="display: inline-block;margin-right: 10rpx">
				<u-button shape="circle" size="medium" @click="listSortPicker.open()">
					<text style="font-size: 24rpx;
            font-weight: bold;
            color: #8c7d7d;padding: 0 20rpx">
						表格排序
					</text>
				</u-button>
			</view>

			<view style="display: inline-block;margin-right: 10rpx">
				<u-button shape="circle" type="success" size="medium" @click="modal.byCapitalInfo.open()">
					<text style="font-size: 24rpx;
            font-weight: bold;
            color: #fffdfd;padding: 0 20rpx">
						资金信息
					</text>
				</u-button>
			</view>
		</view>

		<!--  表格  -->
		<view style="margin: 20rpx 30rpx">
			<uni-table border stripe :loading="table.loading" emptyText="您当前没有提现明细信息.">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center">
						<text class="table-th-font">申请时间</text>
					</uni-th>

					<uni-th align="center">
						<text class="table-th-font">银行卡号</text>
					</uni-th>

					<uni-th align="center">
						<text class="table-th-font">状态</text>
					</uni-th>

					<uni-th align="center">
						<text class="table-th-font">提现金额</text>
					</uni-th>

					<uni-th align="center">
						<text class="table-th-font">操作</text>
					</uni-th>
				</uni-tr>

				<uni-tr v-for="(item,index) in table.data " :key="index">

					<uni-td align="center">
						<text>{{ service.style.time(item.createTime, 6) }}</text>
					</uni-td>

					<uni-td align="center">
						<text>{{ item.cardNum }}</text>
					</uni-td>

					<uni-td align="center">
						<rich-text :nodes="style.status(item.status)">
						</rich-text>
					</uni-td>

					<uni-td align="center">
						<text>{{ item.money }} 元</text>
					</uni-td>

					<uni-td align="center">
						<view style="display: inline-block" class="operation-btn">
							<u-button size="small" type="success" plain text="查看详情"
								@click="modal.byDetails.open(item.id)">
							</u-button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<!--自己封装的提示器-->
		<popup ref="popup" />
	</view>
</template>

<script>
	import UniTr from "@/uni_modules/uni-table/components/uni-tr/uni-tr";
	import service from "@/utils/service"
	import popup from "@/merchant/my/my-popup"
	export default {

		components: {
			UniTr,
			popup
		},
		data() {
			let _vm = this
			return {
				modalShow: false,
				service: service,
				table: {
					loading: true,
					total: 0,
					pageSize: 10,
					pageNo: 1,
					data: [],
					setPageNo(v) {
						_vm.table.pageNo = v
						_vm.getList();
					},
				},
				style: {
					status(v) {
						switch (v) {
							case 0:
								return "<span style='color: #ffa502'>审核中</span>"
							case 1:
								return "<span style='color:#2ed573'>已通过</span>"
							case -1:
								return "<span style='color: #ff4757'>已拒绝</span>"
						}
					}
				},
				// 表格排序选择器
				listSortPicker: {
					show: false,
					// 排序字段
					sortKey: null,
					// 排序规则 1 正序 -1 倒序
					sort: -1,
					options: [
						[{
								label: '默认',
								key: null
							},
							{
								label: '审核时间',
								key: 'audit_time'
							},
							{
								label: '提现金额',
								key: 'money'
							},
						],
						[{
								label: '从小到大',
								value: 1
							},
							{
								label: '从大到小',
								value: -1
							},
						],
					],
					// 确认回调
					confirm(v) {
						let me = _vm.listSortPicker;
						console.log("表格排序选项结果 : ", v)
						me.show = false;
						// 默认
						if (v.value[0].key === null) {
							me.sortKey = null
						} else {
							me.sortKey = v.value[0].key;
						}
						me.sort = v.value[1].value;
						this.getList();
					},
					close() {
						_vm.listSortPicker.show = false;
					},
					open() {
						_vm.listSortPicker.show = true;
					}
				},
				/* 条件筛选对象 */
				condition: {
					show: false,
					open() {
						_vm.condition.show = true;
					},
					close() {
						_vm.condition.show = false;
					},
					data: {
						/* 备注 */
						remark: '',
						/* 银行卡号 */
						cardNum: '',
						/* 审核状态 */
						status: '',
						/* 创建时间范围 */
						createTime: {
							zIndex: 100100,
							value: [],
							change(e) {
								console.log("选中创建时间 : ", e)
								_vm.condition.data.createTime.zIndex = 10000;
								_vm.condition.data.auditTime.zIndex = 100100;
							},
						},
						/* 审核时间范围 */
						auditTime: {
							zIndex: 10000,
							value: [],
							change(e) {
								console.log("选中审核时间 : ", e)
								_vm.condition.data.createTime.zIndex = 100100;
								_vm.condition.data.auditTime.zIndex = 10000;
							},

						}
					},
					def() {
						_vm.condition.data.remark = ''
						_vm.condition.data.cardNum = ''
						_vm.condition.data.status = ''
						_vm.condition.data.createTime.value = []
						_vm.condition.data.auditTime.value = []
						_vm.options.status.def();
						_vm.condition.search();
					},
					search() {
						console.log("点击搜索 条件 : ", _vm.condition.data)
						_vm.condition.close();
						_vm.getList();
					}
				},
				/* 模态窗对象 */
				modal: {
					// 资金信息
					byCapitalInfo: {
						show: false,
						title: '资金信息',
						data: {
							/* 收益占比 */
							shares: 0.00,
							/* 总余额 */
							totalBalance: 0.00,
							/* 正在提现金额 */
							applyIng: 0.00,
							/* 提现成功的金额 */
							successApply: 0.00,
						},
						open() {
							_vm.modal.byCapitalInfo.show = true
						},
						close() {
							_vm.modal.byCapitalInfo.show = false
						}
					},
					// 提现明细
					byDetails: {
						show: false,
						title: '提现详情',
						data: {
							/* 记录id */
							id: '',
							/* 审核id */
							auditId: '',
							/* 申请提现金额 */
							money: 0.00,
							/* 银行卡 id */
							bankCardId: '',
							/* 银行卡号 */
							cardNum: '',
							/* 持卡人姓名 */
							cardName: '',
							/* 开户行 */
							bankName: '',
							/* 审核状态 */
							status: '',
							/* 审核时间 */
							auditTime: ''
						},
						def() {
							_vm.modal.byDetails.data = {
								id: '',
								auditId: '',
								money: 0.00,
								bankCardId: '',
								cardNum: '',
								cardName: '',
								bankName: '',
								status: '',
								auditTime: ''
							}
						},
						async open(id) {
							_vm.modal.byDetails.def();
							let res = await _vm.getDetail(id);
							console.log("res : ", res)
							if (res.code !== 0) {
								_vm.modal.byDetails.close();
								_vm.$refs.popup.error("获取详情失败 : " + res.result);
							} else {
								let errorFields = [];
								service.executeTask(function() {
									_vm.modal.byDetails.data.id = res.result.apply.id;
								}, errorFields, "记录ID")
								service.executeTask(function() {
									_vm.modal.byDetails.data.auditId = res.result.apply.auditId;
								}, errorFields, "审核ID")

								service.executeTask(function() {
									_vm.modal.byDetails.data.money = res.result.apply.money;
								}, errorFields, "提现金额")
								service.executeTask(function() {
									_vm.modal.byDetails.data.bankCardId = res.result.card.id;
								}, errorFields, "银行卡ID")
								service.executeTask(function() {
									_vm.modal.byDetails.data.cardNum = res.result.card.cardNum;
								}, errorFields, "银行卡号")
								service.executeTask(function() {
									_vm.modal.byDetails.data.cardName = res.result.card.cardName;
								}, errorFields, "持卡人姓名")
								service.executeTask(function() {
									_vm.modal.byDetails.data.bankName = res.result.card.bankName;
								}, errorFields, "开户行")
								service.executeTask(function() {
									_vm.modal.byDetails.data.status = res.result.apply.status;
								}, errorFields, "审核状态")
								service.executeTask(function() {
									_vm.modal.byDetails.data.auditTime = res.result.apply.auditTime;
								}, errorFields, "审核时间")
								if (errorFields.length !== 0) {
									uni.showToast({
										title: '丢失参数 : [ ' + errorFields.toString() + " ] ",
										duration: 2500,
										icon: "none"
									})
								}
							}
							_vm.modal.byDetails.show = true
						},
						close() {
							_vm.modal.byDetails.show = false
						}
					}
				},
				/* 加载对象 */
				loading: {
					// 进度
					plan: 0,
					// 阈值
					threshold: 0,
					step() {
						if (++this.plan >= this.threshold) {
							uni.hideLoading();
						}
					}
				},
				/* 选项相关对象 */
				options: {
					/* 审核状态 */
					status: {
						show: false,
						ops: [
							[{
									text: '审核中',
									value: 0
								},
								{
									text: '已通过',
									value: 1
								},
								{
									text: '已拒绝',
									value: 2
								},
							]
						],
						text: '点击选择审核状态',
						close() {
							_vm.options.status.show = false;
						},
						open() {
							_vm.options.status.show = true;
						},
						confirm(e) {
							console.log("审核状态被选中 : ", e)
							_vm.options.status.show = false
							_vm.condition.data.status = e.value[0].value
							_vm.options.status.text = e.value[0].text
						},
						def() {
							_vm.options.status.text = '点击选择审核状态';
						}
					}
				}
			};
		},
		methods: {
			getList() {
				let _t = this;
				let data = {};
				data.pageSize = this.table.pageSize;
				data.pageNo = this.table.pageNo;
				// 如果有排序字段添加排序字段
				if (this.listSortPicker.sortKey !== null) {
					data.sortKey = this.listSortPicker.sortKey;
				}
				if (this.listSortPicker.sort !== null) {
					data.sort = this.listSortPicker.sort;
				}
				// 追加条件字段
				let condition = _t.condition.data;
				if (!service.check.isNull(condition.remark)) {
					data.remark = condition.remark;
				}
				if (!service.check.isNull(condition.cardNum)) {
					data.cardNum = condition.cardNum;
				}
				if (!service.check.isNull(condition.status)) {
					data.status = condition.status;
				}
				if (!service.check.isNull(condition.createTime.value)) {
					data.createTimeScope = JSON.stringify(condition.createTime.value);
				}
				if (!service.check.isNull(condition.auditTime.value)) {
					data.auditTimeScope = JSON.stringify(condition.auditTime.value);
				}
				this.$axios({
					url: 'merchant/merchantApply/list',
					method: "post",
					data: data,
					header: {
						"Authorization": this.token,
						"Content-type": this.contentType,
						"type": "merchantsToken"
					},
				}).then(res => {
					console.log(" merchant/merchantApply/list :  ", res)
					if (res.code === 0) {
						_t.table.data = res.result.list;
						_t.table.pageNo = res.result.pageNo;
						_t.table.total = res.result.total;
					} else {
						_t.$refs.popup.error(" 获取提现明细失败, 请重试 :  " + res.message)
					}
				}).finally(() => {
					_t.table.loading = false
					_t.loading.step();
				})
			},
			/* 获取商家资本信息 */
			getCapitalInfo() {
				let _t = this;
				this.$axios({
					url: 'merchant/merchantBankCard/withdrawalDetail',
					method: "post",
					header: {
						"Authorization": this.token,
						"Content-type": this.contentType,
						"type": "merchantsToken"
					},
				}).then(res => {
					console.log(' merchant/merchantBankCard/withdrawalDetail :', res)
					if (res.code === 0) {
						_t.modal.byCapitalInfo.data = res.result;
					}
				}).finally(() => {
					_t.loading.step();
				})
			},
			/* 获取提现明细详情 */
			getDetail(id) {
				let _t = this;
				return new Promise((resolve, reject) => {
					this.$axios({
						url: 'merchant/merchantApply/detail',
						method: "post",
						header: {
							"Authorization": this.token,
							"Content-type": this.contentType,
							"type": "merchantsToken"
						},
						data: {
							id: id
						}
					}).then(res => {
						console.log(" merchant/merchantApply/detail :  ", res)
						if (res.code === 0) {
							resolve(res)
						} else {
							reject(res)
						}
					})
				})
			}
		},
		onLoad(e) {
			// 获取图像地址前缀
			this.imgApi = this.$reqConfig.URLIMAGE
			// 获取请求头类型
			this.contentType = this.$reqConfig.CONTENTTYPE + ";+charset=UTF-8"
			// 获取token
			this.token = uni.getStorageSync("merchantsToken").token
			console.log("param : ", e)
			if (!service.check.isNull(e.cardNum)) {
				this.condition.data.cardNum = e.cardNum;
			}
			// 资金 + 列表
			this.loading.threshold = 2;
		},
		onShow() {
			this.getCapitalInfo();
			this.getList();
		}
	}
</script>

<style lang="scss">
	.table-th-font {
		font-size: 30rpx;
		color: #1c6f5c;
	}

	.operation-btn {
		margin: 2rpx 4rpx;
	}

	/*表头样式*/
	.uni-table-th {
		background-color: #eff8ff;
		border: 1px #EBEEF5 solid;
	}

	/*内容样式*/
	.uni-table-td {
		border: 1px #EBEEF5 solid;
	}

	/*表单 label*/
	.u-form-item__body__left__content__label.data-v-067e4733 {
		font-size: 30rpx;
		font-weight: bold;
	}
</style>
